<template>
    <accordion >
            <accordion-item title="费用明细" content-height="1500">
                <div class="ak-content">
                    <h5><i class="ion-arrow-up-a icons"></i>价格升级</h5>
                    <ul class="ak-price-improve">
                        <li><span>单人间</span><span><i>￥</i>{{notice.price_tips.price.price_single}}/人</span></li>
                        <li><span>双人间</span><span><i>￥</i>{{notice.price_tips.price.price_double}}/人</span></li>
                        <li><span>三人间</span><span><i>￥</i>{{notice.price_tips.price.price_triple}}/人</span></li>
                        <li><span>四人间</span><span><i>￥</i>{{notice.price_tips.price.price_quad}}/人</span></li>
                    </ul>
                    <div class="ak-note" v-html="notice.price_tips.pricing_special_note"></div>
                    <h5><i class="ion-checkmark-round icons"></i>费用包含</h5>
                    <ul class="ak-yes-include" v-html="notice.price_tips.package_include"></ul>
                    <h5><i class="ion-close-round icons"></i>费用不包含</h5>
                    <ul class="ak-no-include" v-html="notice.price_tips.package_exclude"></ul>
                </div>
            </accordion-item>
            <accordion-item title="预定必读" content-height="1500">
                <div class="ak-content">
                    <h5><i class="ion-social-twitter-outline icons"></i>报名须知</h5>
                    <p v-html="notice.booking_tips.notice"></p>
                    <h5><i class="ion-briefcase icons"></i>行程须知</h5>
                    <p v-html="notice.booking_tips.travel_notice"></p>
                    <h5><i class="ion-backspace-outline icons"></i>取消和更改</h5>
                    <p v-html="notice.booking_tips.change_notice"></p>

                </div>
            </accordion-item>
            <accordion-item v-if="notice.airport_transfer_tips" title="接送机" content-height="1200">
                <div class="ak-content">
                    <h5><i class="ion-android-car icons"></i>接送机</h5>
                    <p v-html="notice.airport_transfer_tips"></p>
                </div>
            </accordion-item>
            <accordion-item title="注意事项" content-height="1500">
                <div class="ak-content">
                    <h5><i class="ion-calendar icons"></i>参团事项</h5>
                    <h5><i class="ion-clock icons"></i>特别提醒</h5>
                    <h5><i class="ion-card icons"></i>预定程序及电子票</h5>
                    <h5><i class="ion-ios-list-outline icons"></i>订购条例</h5>
                </div>
            </accordion-item>
    </accordion>
</template>
<script>
    export default {
        props:['notice'],
        data() {
            return {

            }
        },
        methods: {
            changeColor(event){
                console.log('s')
                console.log(event.target)
            }
        },
        created(){

        }
    }
</script>

<style>
    .ak-content{
        padding:0 12px;
        padding-bottom: 32px;
    }
    .ak-content h5{
        font-size: 18px;
        margin: 32px 0 24px 0;
        color: #363636;
        position: relative;
        font-weight: 400;
    }
    .ak-content h5 .icons{
        margin-right: 10px;
        font-size:25px;
    }
    .ak-content ul.ak-price-improve li{
        margin-bottom: 10px;
        overflow: hidden;
    }
    .ak-content ul.ak-price-improve li span:nth-of-type(1){
        text-align: left;
    }
    .ak-content ul.ak-price-improve li i{
        font-size:12px;
    }
    .ak-content ul.ak-price-improve li span:nth-of-type(2){
        float: right;
        color: #fb5f10;
    }
    div.p_p{
        margin-bottom: 15px;
    }
    div.pr_2{
        margin-top:50px;
        margin-bottom:20px;
    }
    ul.ak-yes-include li{
        /*list-style-type: disc;*/
    }
</style>